<template>
	<view class="job-box">
		<view class="job-head">
			<view class="head-titleBox flex">
				<view class="title">{{workPlan.workPlanName}}</view>
				<view class="timebox">
					<image class="imageStyle" src="../../../static/agentTime.png"></image>
					<text class="textStyle">{{workPlan.insertTime}}</text>
				</view>
			</view>
			<view class="head-box mt30">
				<view class="flex mb20">
					<view class="name">作业类型：</view>
					<view class="value">{{workPlan.workTypeName}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">作业风险等级：</view>
					<view class="value">{{workPlan.riskLevelName}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">工程项目名称：</view>
					<view class="value">{{workPlan.projectName}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">报送单位：</view>
					<view class="value">{{workPlan.belongUnitName}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">创建部门：</view>
					<view class="value">{{workPlan.belongDepName}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">作业单位：</view>
					<view class="value">{{workPlan.workUnit}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">作业人员数量：</view>
					<view class="value">{{workPlan.workPeopleNum}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">开始时间：</view>
					<view class="value">{{workPlan.beginTime}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">结束时间：</view>
					<view class="value">{{workPlan.endTime}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">工作负责人：</view>
					<view class="value">{{workPlan.workManage}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">监理人：</view>
					<view class="value">{{workPlan.supervisor}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">督察人员：</view>
					<view class="value">{{workPlan.supManagePerson}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">到岗到位人员：</view>
					<view class="value">{{workPlan.dgr}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">作业地点：</view>
					<view class="value">{{workPlan.workPlace}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">作业内容：</view>
					<view class="value">{{workPlan.workContent}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">危险识别：</view>
					<view class="value">{{workPlan.riskIdentification}}</view>
				</view>
				<view class="flex mb20">
					<view class="name">控制措施：</view>
					<view class="value">{{workPlan.controlMeasures}}</view>
				</view>
				<view v-if="workPlan.state=='04'">
					<view class="flex mb20">
						<view class="name">退回人：</view>
						<view class="value">{{workPlan.auditPersonName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">退回时间：</view>
						<view class="value">{{workPlan.auditTime}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">退回意见：</view>
						<view class="value">{{workPlan.auditComment}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="job-footer">
			<view class="flex rel">
				<!-- 申请人头像 -->
				<image class="applicantImg" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
				<!-- 是否审批小图标 -->
				<!-- 待审批 -->
				<!-- <image class="iconImgs" src="../../../static/approval1.png" v-if="data.status == 1"></image> -->
				<!-- 已审批 -->
				<image class="iconImgs" src="../../../static/approval2.png"></image>
				<!-- 取消审批 -->
				<!-- <image class="iconImgs" src="../../../static/approval3.png" v-if="data.status == 3"></image> -->
				<!-- 申请人盒子 -->
				<view class="applicantBox">
					<view class="applicanTitle">申请人</view>
					<view class="applicanPeople">{{workPlan.insertUserName}}</view>
				</view>
				<text class="applicanDate">{{workPlan.insertTime}}</text>
			</view>

			<!-- 横线 -->
			<view class="hr"></view>

			<view class="rel">
				<view class="flex">
					<!-- 审批人头像 -->
					<image class="applicantImg" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					<!-- 是否审批小图标 -->
					<!-- 待审批 -->
					<image class="iconImg" src="../../../static/approval1.png" v-if="workPlan.state == '02'"></image>
					<!-- 已审批 -->
					<image class="iconImg" src="../../../static/approval2.png" v-if="workPlan.state == '03'"></image>
					<!-- 取消审批 -->
					<image class="iconImg" src="../../../static/approval3.png" v-if="workPlan.state == '04'"></image>
					<view class="applicantBox">
						<view class="applicanTitle">审批人</view>
						<view class="applicanPeople">{{workPlan.auditPersonName}}</view>
					</view>
					<view class="applicanDate">
						<view class="appliTime" v-if="workPlan.state !== '02'">
							{{workPlan.auditTime}}
						</view>
						<view class="t1" v-if="workPlan.state == '02'">待审批</view>
						<view class="t2" v-if="workPlan.state == '03'">已审核</view>
						<view class="t3" v-if="workPlan.state == '99'">已取消</view>
					</view>
				</view>
				<!-- 已取消信息 -->
				<view class="cancelBox" v-if="workPlan.state == '99'">
					{{workPlan.cancelReason}}
				</view>
			</view>
		</view>

		<!-- 待审批才显示的按钮 -->
		<view style="height: 140rpx" v-if="workPlan.state == '02' && workPlan.userAuditType == '01'">
			<view class="batch-footer">
				<view style="display: flex;box-sizing: border-box;padding: 30rpx 0 0 0;">
					<view class="btn1" @click="agreeBtn('01')">退回</view>
					<view class="btn2" @click="agreeBtn('03')">通过</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<base-pop :show="backShow" :placeholder="placeholder" @backSure="handlAgree" @cancelBtn="handlCancel"></base-pop>
	</view>
</template>

<script>
	import basePop from '../../../components/base-pop/base-pop.vue'
	export default {
		components: {
			basePop
		},
		data() {
			return {
				state:'',
				workPlan: {},
				//通过弹框
				text: '您是否确定作业开始，确定后将无法修改！',
				placeholder:'',
				// 退回弹框
				backShow: false
			}
		},
		onLoad(options) {
			this.getAppWorkPlanDetailInfo(options.id)
		},
		methods: {
			getAppWorkPlanDetailInfo(val) {
				let that = this
				let params = {
					workPlanId: val
				}
				that.request(that.$api.getAppWorkPlanDetailInfo, params, 'POST').then((res) => {
					if (res) {
						this.workPlan = res.resultValue.items[0]
					}
				})
			},
			// 通过按钮展示通过弹框
			agreeBtn(val) {
				this.state = val
				this.placeholder = val === '03' ? '请输入审核意见' : '请输入取消作业理由'
				this.backShow = true
			},
			handlCancel() {
				this.backShow = false
			},
			// 通过按钮的确认
			handlAgree(val) {
				let that = this
				if (val == '') {
					uni.$u.toast('请输入审核意见！')
					return
				}
				let params = [{
					state: this.state,
					workPlanId: that.workPlan.workPlanId,
					auditComment: val
				}]
				that.request(that.$api.auditWorkPlan, params, 'POST').then((res) => {
					if (res.code == 200) {
						uni.$u.toast(res.resultValue)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					} else {
						uni.$u.toast(res.resultValue)
					}
					this.agreeShow = false
				})
			},
			
		},

	}
</script>

<style>
	.job-box {
		background-color: #f4f6fa;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.job-head {
		background: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 8px;
		padding: 20rpx 20rpx 10rpx 30rpx;
		box-sizing: border-box;
	}

	.title {
		width: calc(100% - 360rpx);
		color: #000000;
		font-size: 32rpx;
		font-weight: Medium;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		margin-right: 60rpx;
	}

	.timebox {
		width: 300rpx;
		display: flex;
		justify-content: space-between;
	}

	.imageStyle {
		width: 28rpx;
		height: 28rpx;
		margin-top: 4rpx;
	}

	.textStyle {
		width: calc(100% - 32rpx);
		margin-left: 10rpx;
		color: #939EA8;
		font-size: 24rpx;
	}

	.name {
		width: 210rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		width: calc(100% - 210rpx);
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.job-footer {
		padding: 40rpx 40rpx 40rpx 20rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 8px;
		box-sizing: border-box;
	}

	.applicantImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.applicantBox {
		margin-left: 30rpx;
		font-size: 30rpx;
		width: 260rpx;
	}

	.applicanTitle {
		color: #000000;
		font-weight: 600;
		margin-bottom: 6rpx;

	}

	.applicanPeople {
		color: #65717D;
		font-size: 28rpx;
	}

	.applicanDate {
		color: #939EA8;
		font-size: 26rpx;
		width: calc(100% - 340rpx);
		text-align: right;
	}

	.hr {
		height: 80rpx;
		width: 2rpx;
		border: 2px solid #ECECEC;
		margin: 10rpx 0 10rpx 35rpx;
		padding: 40rpx 0;
		box-sizing: border-box;
	}

	.iconImgs {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		left: 60rpx;
	}

	.iconImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 50rpx;
		left: 60rpx;
	}

	.cancelBox {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #F5F6F9;
		font-size: 28rpx;
		margin: 30rpx 30rpx 20rpx 100rpx;
		position: relative;
	}

	.applicanRight {
		width: calc(100% - 280rpx);
		font-size: 32rpx;
		text-align: right;
	}

	.appliTime {
		color: #939EA8;
		font-size: 26rpx;
	}

	.batch-footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-top: 1px solid #CDCDCD;
		text-align: center;
	}

	.btn1 {
		width: 50%;
		height: 70rpx;
		line-height: 70rpx;
		color: #3473F9;
		margin-right: 36rpx;
		border-radius: 14rpx;
		border: 2rpx solid #3473F9;
	}

	.btn2 {
		width: 50%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #3473F9;
		color: #FFFFFF;
		border-radius: 14rpx;
	}

	.t1,
	.t2,
	.t3 {
		width: 100%;
		margin-top: 6rpx;
		font-size: 32rpx;
	}

	.t1 {
		color: #FFA428;
	}

	.t2 {
		color: #30BA05;
	}

	.t3 {
		color: #BEBEBE;
	}
</style>
